<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/zns_style.css" type="text/css">
</head>
<body>
<div id="playimages" class="play">
    <ul class="big_pic">

        <div class="prev"></div>
        <div class="next"></div>

        <div class="text">加载图片说明...</div>
        <div class="length">计算图片数量...</div>

        <a class="mark_left" href="javascript:;"></a>
        <a class="mark_right" href="javascript:;"></a>

        <div class="bg"></div>
        <li style="z-index: 1"><img src="images3/1.jpg"></li>
        <li><img src="images3/2.jpg"></li>
        <li><img src="images3/3.jpg"></li>
        <li><img src="images3/4.jpg"></li>
        <li><img src="images3/5.jpg"></li>
        <li><img src="images3/6.jpg"></li>
    </ul>
    <div class="small_pic">
        <ul style="width:390px;">
            <li style="filter:alpha(opacity:1);opacity: 1"><img src="images3/1.jpg" /></li>
            <li><img src="images3/2.jpg" /></li>
            <li><img src="images3/3.jpg" /></li>
            <li><img src="images3/4.jpg" /></li>
            <li><img src="images3/5.jpg" /></li>
            <li><img src="images3/6.jpg" /></li>
        </ul>
    </div>
</div>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript">

    var oDiv = document.getElementById('playimages');
    var oBtnPrev = getClass(oDiv,'prev')[0];
    var oBtnNext = getClass(oDiv,'next')[0];
    var oMarkLeft = getClass(oDiv,'mark_left')[0];
    var oMarkRight = getClass(oDiv,'mark_right')[0];

    var oDivSmall = getClass(oDiv,'small_pic')[0];
    var oUlSmall = oDivSmall.getElementsByTagName('ul')[0];
    var aLiSmall = oUlSmall.getElementsByTagName('li');

    var oDivBig = getClass(oDiv,'big_pic')[0];
    var aLiBig = oDivBig.getElementsByTagName('li');

    var nowIndex =2;
    var now = 0;

    oUlSmall.style.width = aLiSmall[0].offsetWidth*aLiSmall.length+'px';


    //左右按钮
    oBtnPrev.onmouseover= oMarkLeft.onmouseover = function () {
        startMove(oBtnPrev,'opacity',100);
    };
    oBtnPrev.onmouseout= oMarkLeft.onmouseout = function () {
        startMove(oBtnPrev,'opacity',0);
    };
    oBtnNext.onmouseover = oMarkRight.onmouseover = function () {
        startMove(oBtnNext,'opacity',100);
    };
    oBtnNext.onmouseout = oMarkRight.onmouseout = function () {
        startMove(oBtnNext,'opacity',0);
    };

    //点击小图，切换大图
    for(var i=0;i<aLiSmall.length;i++){

        aLiSmall[i].index = i;//循环一次，赋值一次。而不是直接用i，直接用i就是6
        aLiSmall[i].onclick = function () {

                if(now == this.index) return;
                now = this.index;//这个now就代表大图的index
                tab();
        };
        
        //小图鼠标移入移出事件
        aLiSmall[i].onmouseover = function () {
            startMove(this,'opacity',100);
        };
        aLiSmall[i].onmouseout = function () {

            if(this.index != now){
              startMove(this,'opacity',60);
            }


        }

    }
    function tab() {

        aLiBig[now].style.zIndex = nowIndex++;//改变大图的层级z-index

        for(var i=0;i<aLiSmall.length;i++){
            startMove(aLiSmall[i],'opacity',60);
        }//每次点击初始化的时候,将所有元素都变成不透明，这样就解决了透明之后没法移除透明样式的问题
        startMove(aLiSmall[now],'opacity',100);//当前的li变成透明

        aLiBig[now].style.height = 0;
        startMove(aLiBig[now],'height',320);//这边不能用this.index指代now 了。

        //移动
        if(now==0){
            startMove(oUlSmall,'left',0);
        }
        else if(now == aLiSmall.length-1){
            startMove(oUlSmall,'left',-(now-2)*aLiSmall[0].offsetWidth);
        }
        else{
            startMove(oUlSmall,'left',-(now-1)*aLiSmall[0].offsetWidth);
        }

    }



    //上一张下一张
    oBtnPrev.onclick = function () {
       now--;
       if(now == -1){
           now = aLiSmall.length-1;
       }
      tab();
    };
    oBtnNext.onclick = function () {
        now++;
        if(now == aLiSmall.length){
            now = 0;
        }
        tab();
    };

   var timer = setInterval(oBtnNext.onclick,2000);
   oDiv.onmouseover = function () {
       clearInterval(timer);
   };
   oDiv.onmouseout = function () {
       timer = setInterval(oBtnNext.onclick,2000);
   }



</script>

</body>
</html>